<template>
    <div class="i-hot-game  index_carousel_container">
        <div id="index_carousel" class="m-slider index_carousel_m swiper-container swiper-container-horizontal">

            <swiper ref="mySwiper" :options="swiperOptions" class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in initBannerList" @click="detail(item.liveLink)" style="width: 414px;">

                    <a class="slider-items clickstat" ref="home" eid="click/home/banner" eid_desc="banner"
                    :style="{backgroundImage:'url(' + item.imgBase + ')'}"
                        href="javascript:void(0)"></a>
                </div>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
    </div>

</template>

<script>
    import { bannerList } from '../../../utils/bannerConfig.js'

    export default {
        name: 'carrousel',
        data() {
            const _self = this;
            return {
                initBannerList: bannerList,
                isPC: false,
                currentPicSel: 0,
                activeIndex1: 0,
                swiperOptions: {
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    //自动播放
                    autoplay: {
                        delay: 2000,
                        disableOnInteraction: false
                    },
                    //循环
                    loop: true,

                    on: {
                        slideChangeTransitionStart: function () {
                            _self.currentPicSel = this.activeIndex == 8 ? 0 : this.activeIndex - 1
                        }
                    }
                },
            }
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.$swiper
            }
        },
        mounted() {
            this.getBanner()
            this.swiper.slideTo(3, 1000, false)

        },
        methods: {
            getBanner() {
                this.$axios.get('/api/projectApi/getBanner').then((res) => {
                    if (res.data.code == "0") {
                        this.initBannerList = res.data.data;
                    }
                }, (err) => {
                }).then(() => {

                }, (err) => {
                })
            },
            detail(link) {
                console.log(link)
                window.open(link, 'top')
            },
        }
    }

</script>

<style>
    .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
        left: 32%;
    }
    @media screen and (min-width:375px){
        .i-hot-game .index_carousel_m .slider-items{
            padding-bottom:43.6%;
        }
    }
    @media screen and (min-width:414px){
        .i-hot-game .index_carousel_m .slider-items{
            padding-bottom:44%;
        }
    }
    @media screen and (min-width:765px){
        .i-hot-game .index_carousel_m .slider-items{
            padding-bottom:46.6%;
        }
    }
    
</style>